<template>
	<view class="advertisement_order">
		<u-navbar title="广告订单" :border-bottom="false"></u-navbar>
		<u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
		<scroll-view class="msg" scroll-y="true" @scrolltolower="lower">
			<view v-for="(item, index) in flowList" :key="index" class="i">
				<view class="t">
					<view class="l">订单号：{{ item.order_num }}</view>
					<view class="r">{{ item.status === 1 ? '投放中' : item.status === 2 ? '已完成' : item.status === 3 ? '已拒绝' : '' }}</view>
				</view>
				<view class="c">
					<img :src="item.goods_info.map_image" alt="" class="c_img" />
					<view class="warp">
						<view class="name">{{ item.goods_info.goods_title }}</view>
						<view class="time1">订单时间：{{ item.create_time }}</view>
						<view class="time1">投放时间：{{ item.pay_time }}</view>
						<view class="time1">完成时间：{{ item.end_time }}</view>
					</view>
				</view>
				<view class="b">
					<view class="l">
						合计：
						<view class="colo">￥{{ item.pay_money }}</view>
					</view>
					<view class="r">投放时间：{{ item.day_num }}天（{{ item.day_num * 24 }}小时）</view>
				</view>
			</view>
			<view style="padding: 20rpx 0rpx; box-sizing: border-box">
				<u-loadmore bg-color="rgb(240, 240, 240)" :status="loadStatus" :bg-color="'none'"></u-loadmore>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import { advlist } from '../../libs/axios.js';
export default {
	data() {
		return {
			list: [
				{
					name: '全部'
				},
				{
					name: '投放中'
				},
				{
					name: '已完成'
				},
				{
					name: '审核拒绝'
				}
			],
			current: 0,
			loadStatus: 'loadmore',
			page_num: 1,
			flowList: []
		};
	},
	onLoad() {
		this.lower();
	},
	methods: {
		async lower() {
			if (this.loadStatus === 'nomore') {
				return false;
			} else {
				this.loadStatus = 'loading';
			}
			let info = await advlist({
				pageIndex: this.page_num,
				pageSize: 10,
				list_type: this.current
			});
			info.data.list.forEach((item) => {
				item.create_time = this.$moment(item.create_time * 1000).format('YYYY-MM-DD HH:mm:ss');
				item.pay_time = this.$moment(item.pay_time * 1000).format('YYYY-MM-DD HH:mm:ss');
				item.end_time = this.$moment(item.end_time * 1000).format('YYYY-MM-DD HH:mm:ss');
				this.flowList.push(item);
			});
			if (info.data.list.length === 10) {
				this.page_num += 1;
				this.loadStatus = 'loadmore';
			} else {
				this.loadStatus = 'nomore';
			}
		},
		change(index) {
			this.current = index;
			this.loadStatus = 'loadmore';
			this.page_num = 1;
			this.flowList = [];
			this.lower();
		}
	}
};
</script>

<style lang="scss">
.advertisement_order {
	height: 100vh;
	background: rgba(245, 245, 245, 1);
	padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
	padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/
	.msg {
		margin-top: 7px;
		height: 75vh;
		overflow: scroll;
		.i {
			width: 351px;
			border-radius: 5px;
			background: rgba(255, 255, 255, 1);
			margin: 7px auto;
			padding: 15px;
			.t {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 12px;
				font-weight: 400;
				.l {
					color: rgba(51, 51, 51, 1);
				}
				.r {
					color: rgba(254, 94, 41, 1);
				}
			}
			.c {
				display: flex;
				padding: 10px 0;
				.c_img {
					width: 84px;
					height: 84px;
					border-radius: 5px;
				}
				.warp {
					width: 70%;
					height: 84px;
					margin-left: 10px;
					.name {
						width: 100%;
						overflow: hidden; //溢出隐藏
						white-space: nowrap; // 强制一行显示
						text-overflow: ellipsis; // 显示。。。省略号
					}
					.time1 {
						margin-top: 5px;
						font-size: 12px;
						font-weight: 400;
						color: rgba(51, 51, 51, 1);
					}
				}
			}
			.b {
				display: flex;
				justify-content: space-between;
				margin-top: 10px;
				.l {
					display: flex;
					align-items: flex-end;
					font-size: 12px;
					font-weight: 400;
					color: rgba(51, 51, 51, 1);
					.colo {
						font-size: 14px;
						font-weight: 400;
						color: rgba(246, 83, 50, 1);
					}
				}
				.r {
					font-size: 12px;
					font-weight: 400;
					color: rgba(51, 51, 51, 1);
				}
			}
		}
	}
}
</style>
